<div
  class="nav-pf-vertical nav-pf-vertical-with-sub-menus"
  ng-class="{
    collapsed: nav.collapsed && !isMobile,
    'hide-mobile-nav': !nav.showMobileNav && isMobile,
    'hover-secondary-nav-pf': sidebar.secondaryOpen && !isMobile,
    'show-mobile-nav': nav.showMobileNav && isMobile,
    'show-mobile-secondary': nav.showMobileNav && sidebar.showMobileSecondary && isMobile
  }"
  on-esc="closeNav()">
  <nav ng-if="view.hasProject" class="nav-vertical-primary">
    <ul class="list-group">

      <!-- Primary Nav -->
      <li
        ng-repeat="primaryItem in navItems"
        ng-class="{
          active: primaryItem === activePrimary,
          'is-hover': primaryItem.isHover,
          'secondary-nav-item-pf': primaryItem.secondaryNavSections.length
        }"
        ng-if="show(primaryItem)"
        ng-mouseenter="onMouseEnter(primaryItem)"
        ng-mouseleave="onMouseLeave(primaryItem)"
        class="list-group-item">
        <a
          ng-if="primaryItem.href"
          ng-href="{{navURL(primaryItem.href)}}"
          ng-click="itemClicked(primaryItem)">
          <span title="{{primaryItem.label}}" class="{{primaryItem.iconClass}}" aria-hidden="true"></span> <span class="list-group-item-value">{{primaryItem.label}}</span> <span ng-if="nav.collapsed && !isMobile" class="sr-only">{{primaryItem.label}}</span>
        </a>
        <a
          ng-if="!primaryItem.href"
          href=""
          ng-click="itemClicked(primaryItem)">
          <span title="{{primaryItem.label}}" class="{{primaryItem.iconClass}}" aria-hidden="true"></span> <span class="list-group-item-value">{{primaryItem.label}}</span> <span ng-if="nav.collapsed && !isMobile" class="sr-only">{{primaryItem.label}}</span>
        </a>

        <!-- Secondary Nav -->
        <div
          ng-if="primaryItem.secondaryNavSections.length"
          class="secondary-nav-item-pf"
          ng-class="{
            'mobile-nav-item-pf': primaryItem.mobileSecondary && isMobile
          }">
          <div class="nav-pf-secondary-nav">
            <div class="nav-item-pf-header">
              <a
                href=""
                class="secondary-collapse-toggle-pf"
                ng-click="collapseMobileSecondary(primaryItem, $event)"
                role="button"><span class="sr-only">Back</span></a>
              <span>{{primaryItem.label}}</span>
            </div>
            <ul class="list-group">
              <li
                ng-repeat-start="secondarySection in primaryItem.secondaryNavSections"
                ng-if="secondarySection.header"
                class="nav-item-pf-header">
                {{secondarySection.header}}
              </li>
              <li
                ng-repeat="secondaryItem in secondarySection.items"
                ng-class="{ active: secondaryItem === activeSecondary }"
                ng-if="show(secondaryItem)"
                class="list-group-item">
                <a ng-href="{{navURL(secondaryItem.href)}}" ng-click="primaryItem.mobileSecondary = false;">
                  <span class="list-group-item-value">{{secondaryItem.label}}</span>
                </a>
              </li>
              <li ng-repeat-end style="display:none;"></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </nav>
  <!-- Group utility links into single nav -->
  <navbar-utility-mobile></navbar-utility-mobile>
</div>
